<html>
<head>
  <title>
    Emscripten: Raytracing
  </title>
  <script src="raytrace.js"></script>
  <script type="text/javascript">
    // print function which the runtime will call
    function print(text) {
      document.getElementById('output').innerHTML = text;
    }

    var drawingNow = false;
    var calcedDepth = -1;
    // Do everything - initialize SDL, set up canvas, render
    function render(size, depth) {
      var startTime = Date.now();

      if (drawingNow) return;
      drawingNow = true;
      if (calcedDepth != depth) {
        print('<b>Generating scene data, please wait...</b>');
      }
      setTimeout(function() {
        if (calcedDepth != depth) {
          run([depth.toString()]);
          calcedDepth = depth;
        }
        _SDL_Init(size);
        var canvas = document.getElementById('canvas');
        canvas.width = canvas.height = size;
        IHEAP[_screen] = _SDL_SetVideoMode(canvas.width, canvas.height, 32, 0, canvas);
        var y = canvas.height-1;
        function drawLine() {
          print("Raytracing line: <b>" + (canvas.height-y) + "/" + canvas.height + '</b>');
          __ZL10trace_lineiii(canvas.width, canvas.width, y);
          y--;
          if (y >= 0) {
            setTimeout(arguments.callee, 1);
          } else {
            print('Finished in ' + (Date.now() - startTime)/1000 + ' seconds.');
            drawingNow = false;
          }
        }
        drawLine();
      });
    }
  </script>
</head>
<body>
  <canvas id='canvas' width=1 height=1></canvas>
  <hr>
  <form onsubmit="setTimeout(function() { render(parseInt(size.value), parseInt(depth.value)) }); return false">
    Rendered width/height (pixels): <input type="text" name="size" value="128">(use less for slower machines)<br>
    Scene recursion (child spheres/sphere): <input type="text" name="depth" value="5">(use less for slower machines; careful with values > 6!)<br>
    <input type="submit" value="Go!">
  </form>
  <div id="output" style="font-family: Courier New,Courier,monospace;"></div>
  <hr>
  Simple raytracing demo. The <a href="http://ompf.org/ray/sphereflake/">original C++ source</a> was
  automatically converted to JavaScript using <a href="http://emscripten.org">Emscripten</a>.
</body>
</html>

